$white : #f8f7f2;
$black : #030f01;

$size : 100px;

$transition: .75s;
$easing : cubic-bezier(.39,1.52,.46,.92);

@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500';

.menu{
    z-index: 999;
}
.menu, .button {
    width: $size;
    height: $size;
}

.menu {
    position: fixed;
    top: 50px;
    left: 50px;
    transition: transform $transition*1.5 $easing;
    transform: scale3d(1,1,1);
    transform-origin: top left;
    cursor: pointer;
}

.button {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    mix-blend-mode: multiply;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 33%;
    font: #{$size/4}/#{$size} Alegreya Sans, sans-serif;
    transition: transform $transition $easing;
    will-change: transform; // I'm a little shocked how much this improves performance -- Chrome 52


    &.closed { transform: translate3d(0,0,0) !important; }
}

.main {
    color: $black;
    text-align: center;
    mix-blend-mode: normal;
    line-height: $size;
    box-shadow: 0 0 0 5px rgba($black, .1);
    transition: border-color $transition, color $transition;
    will-change: color, border-color, background;

    .closed & {
        color: $white;
        box-shadow: 0 0 0 5px rgba($black, 0);
    }
}


$items : home, music, messages, places, bookmark;
$colors : #1ba5cd, #1ab254, #fec72e, #fa7d39, #ee5656;
$coords : 0 1, .382683 .92388, .707107 .707107, .92388 .382683, 1 0;
$closed_coords : 0 -.5, .475528 -.154508, .293893 .404508, -.293893 .404508, -.475528 -.154508;
$spacing : 225%;

// 多值变量 -数组，使用 nth(数组, index) 的方式来获取
// 多值变量-映射，使用 map-get( 映射, key) 的方式来获取
// 循环  @for  和   @each

@for $i from 1 through length($items) {
    .#{nth($items, $i)} {
        $open_x : nth(nth($coords, $i), 2) * $spacing;
        $open_y : nth(nth($coords, $i), 1) * $spacing;
        $closed_x : nth(nth($closed_coords, $i), 1) * 10%;
        $closed_y : nth(nth($closed_coords, $i), 2) * 10%;
        background-color: nth($colors, $i);
        top: $open_y;
        left: $open_x;
        //background-image: url(https://bennettfeely.com/cdpn/#{nth($items, $i)}.svg);
        transition-duration: ($i/length($items) * $transition) + $transition/2;

    .closed & {
        transform: translate3d(-$open_x + $closed_x * 2, -$open_y + $closed_y * 2, 0) rotate(-180deg);
    }
}
}